<template>
  <div id="index" ref="appRef">
    <div class="bg hdindex">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColors" />
            <div class="title">
              <span class="title-text">{{ title }}</span>
              <dv-decoration-6
                class="dv-dec-6"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
              />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="decorationColors"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>
        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <span class="text"
                ><img src="@/assets/img/favorite4.png" style="height: 50px"
              /></span>
            </div>
            <div class="react-left ml-3" style="background-color: #0f1325">
              <span
                class="text"
                style="display: flex; align-items: center; padding: 5px 35px"
              >
                <HdItem
                  title="报警"
                  style="display: inline-flex; margin-right: 15px"
                >
                  <n-radio-group
                    v-model:value="config.alarm_switch"
                    @change="changeAlarm"
                    style="
                      --n-height: 29px;
                      --n-font-size: 18px;
                      --n-opacity-disabled: 1;
                    "
                  >
                    <n-radio-button :value="true" label="开" />
                    <n-radio-button :value="false" label="关" />
                  </n-radio-group>
                </HdItem>
                <n-icon
                  size="36"
                  color="#0e7a0d"
                  @click.stop="showSetingModel = true"
                >
                  <SettingOutlined />
                </n-icon>
              </span>
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right mr-3" style="background-color: #0f1325">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 100%;
                "
                class="text fw-b"
              >
                <weather />
              </div>
            </div>
            <div class="react-right mr-4 react-l-s">
              <span class="react-after"></span>
              <span class="text">
                {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }}
                {{ timeInfo.dateDay }}
              </span>
            </div>
            <div style="position: absolute; z-index: 9; top: 40px; right: 20px">
              <n-carousel autoplay>
                <n-alert
                  style="width: 500px"
                  type="error"
                  v-for="item in warnInfo"
                  :title="item.title"
                  :key="item.key"
                >
                  <span style="font-size: 20px">{{ item.warnMsg }}</span>
                </n-alert>
              </n-carousel>
            </div>
          </div>
        </div>

        <div class="body-box">
          <!-- 第三行数据 -->

          <TransitionGroup name="fade" tag="div" class="content-box">
            <dv-border-box-8 class="itema1" key="1">
              <hd-pie />
            </dv-border-box-8>

            <dv-border-box-12 class="itema2" key="2">
              <hd-pie2 />
            </dv-border-box-12>
            <!-- <dv-border-box-12
                v-for="(item, idx) in videoPositons"
                :key="item.pos"
                :class="item.pos"
                @click="changeVideo(idx)"
              >
                <FlvVideo :url="item.url"
              /></dv-border-box-12> -->

            <dv-border-box-12
              :class="videoPositons[0].pos"
              @click="changeVideo(0)"
              v-show="videoPositons[0].show"
              key="3"
            >
              <FlvVideo :url="videoPositons[0].url" />
            </dv-border-box-12>

            <dv-border-box-12
              :class="videoPositons[1].pos"
              @click="changeVideo(1)"
              v-show="videoPositons[1].show"
              key="4"
            >
              <FlvVideo :url="videoPositons[1].url" />
            </dv-border-box-12>

            <dv-border-box-12
              :class="videoPositons[2].pos"
              @click="changeVideo(2)"
              v-show="videoPositons[2].show"
              key="5"
            >
              <FlvVideo :url="videoPositons[2].url" />
            </dv-border-box-12>

            <dv-border-box-12
              :class="videoPositons[3].pos"
              v-show="videoPositons[3].show"
              @click="changeVideo(3)"
              key="6"
            >
              <FlvVideo :url="videoPositons[3].url" />
            </dv-border-box-12>

            <dv-border-box-12
              :class="videoPositons[4].pos"
              v-show="videoPositons[4].show"
              key="7"
              @click="changeVideo(4)"
            >
              <FlvVideo :url="videoPositons[4].url" />
            </dv-border-box-12>
          </TransitionGroup>
        </div>
      </div>
    </div>
    <n-modal
      v-model:show="showModel"
      style="width: 1000px; background: #4c4d5a"
    >
      <div>
        <n-row>
          <n-col span="24">
            <hd-line chart-data="1"></hd-line>
          </n-col>
        </n-row>
        <n-row>
          <n-col span="12"> <hd-pie3></hd-pie3></n-col>
          <n-col span="12"> </n-col>
        </n-row>
      </div>
    </n-modal>
    <n-modal
      v-model:show="showSetingModel"
      preset="card"
      title="设置"
      style="width: 600px; background-color: rgb(110 171 211)"
    >
      <n-form
        ref="formRef"
        :model="model"
        label-placement="left"
        label-width="auto"
        require-mark-placement="right-hanging"
        :style="{
          maxWidth: '600px',
        }"
      >
        <n-form-item label="报警等待时长" path="config.time_out">
          <n-input-number
            title="报警持续时间大于等于此设置时才进行报警"
            v-model:value="model.config.time_out"
            :step="10"
            :min="0"
            :max="36000"
            :precision="0"
            ><template #suffix> 秒 </template></n-input-number
          >
        </n-form-item>
        <n-form-item label="报警关闭时长" path="config.alarm_is_dismissed">
          <n-input-number
            title="关闭报警后，在此设置的时间后重新启动报警"
            v-model:value="model.config.alarm_is_dismissed"
            :step="10"
            :min="0"
            :max="36000"
            :precision="0"
            ><template #suffix> 秒 </template></n-input-number
          >
        </n-form-item>
        <n-form-item label="水槽水位上限" path="config.time_out">
          <n-input-number
            title="高于此设置水位时报警"
            v-model:value="param_scsy.max"
            :step="1"
            :min="100"
            :max="200"
            :precision="0"
            ><template #suffix> cm </template></n-input-number
          >
        </n-form-item>
        <n-form-item label="水槽水位下限" path="config.time_out">
          <n-input-number
            title="低于此设置水位时报警"
            v-model:value="param_scsy.min"
            :step="1"
            :min="0"
            :max="200"
            :precision="0"
            ><template #suffix> cm </template></n-input-number
          >
        </n-form-item>
        <n-form-item label="电泳车间水位上限" path="config.time_out">
          <n-input-number
            title="高于此设置水位时报警"
            v-model:value="param_dycj.max"
            :step="1"
            :min="100"
            :max="500"
            :precision="0"
            ><template #suffix> mm </template></n-input-number
          >
        </n-form-item>
        <n-form-item label="电泳车间水位下限" path="config.time_out">
          <n-input-number
            title="低于此设置水位时报警"
            v-model:value="param_dycj.min"
            :step="1"
            :min="0"
            :max="500"
            :precision="0"
            ><template #suffix> mm </template></n-input-number
          >
        </n-form-item>
        <!-- <n-form-item label="锅炉蒸汽压力上限" path="config.time_out">
          <n-input-number
            title="高于此设置时报警"
            v-model="param_scsy.max"
            :step="1"
            :min="0"
            :max="10"
            :precision="2"
            ><template #suffix> Mpa </template></n-input-number
          >
        </n-form-item> -->
        <n-form-item label="锅炉蒸汽压力下限" path="config.time_out">
          <n-input-number
            title="控制锅炉蒸汽压力仪表下限显示，不用做报警"
            v-model:value="param_zqyl.min"
            :step="0.05"
            :min="0"
            :max="10"
            :precision="2"
            ><template #suffix> Mpa </template></n-input-number
          >
        </n-form-item>
        <n-data-table :columns="columns" :data="model.data" :max-height="250" />
        <div style="display: flex; justify-content: flex-end">
          <n-button round type="primary" @click="changeAlarm"> 保存 </n-button>
        </div>
      </n-form>
    </n-modal>
    <!-- <audio style="display: none" ref="audio1" id="audio" :loop="true">
      <source src="@/assets/audio/4031.wav" />
    </audio> -->
    <audio style="display: none" ref="audio1" id="audio" :loop="true">
      <source src="@/assets/audio/620.mp3" />
    </audio>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  onMounted,
  onUnmounted,
  h,
  watch,
  computed,
} from "vue";
import { useStore } from "vuex";
import { formatTime } from "@/utils/index";
import HdItem from "@/components/HdItem/index.vue";
import {
  NRadioButton,
  NRadioGroup,
  NForm,
  NFormItem,
  NInputNumber,
  NButton,
  NSwitch,
} from "naive-ui";

import { WEEK, videoInfo } from "@/constant/hdindex/index-prod";
// import { WEEK, videoInfo } from `@/constant/hdindex/index`;

import useDraw from "@/utils/useDraw";
import { title, subtitle, moduleInfo } from "@/constant/hdindex/index";

import hdPie from "../hdPie/index.vue";
import hdPie2 from "../hdPie/index2.vue";
import hdPie3 from "../hdPie/index3.vue";
import hdLine from "../hdLine/index.vue";
import {
  NModal,
  NRow,
  NCol,
  NAlert,
  NCarousel,
  NIcon,
  NDataTable,
} from "naive-ui";
import { SettingOutlined } from "@vicons/antd";
import weather from "@/components/weather/index.vue";
import FlvVideo from "@/components/FlvVideo/index.vue";
const json = require("@/store/get_glf.json");
// import audioWarn from "@/assets/audio/4031.wav"

export default defineComponent({
  components: {
    hdPie,
    hdPie2,
    hdPie3,
    hdLine,
    NModal,
    NRow,
    NAlert,
    NCarousel,
    NCol,
    NForm,
    NFormItem,
    NInputNumber,
    NDataTable,
    NButton,
    NSwitch,
    weather,
    FlvVideo,
    HdItem,
    NRadioButton,
    NRadioGroup,
    SettingOutlined,
    NIcon,
  },
  setup() {
    const isMon = ref<boolean>(false);
    const videoPositons = reactive(videoInfo);
    let curIdx = 3;
    const changeVideo = (idx) => {
      if (idx === curIdx) return;
      console.log("change", videoPositons[idx], videoPositons[curIdx]);
      videoPositons[curIdx].show = false;
      videoPositons[idx].show = false;
      let tmpIdx = curIdx;
      setTimeout(() => {
        videoPositons[tmpIdx].show = true;
        videoPositons[idx].show = true;
      });
      videoPositons[curIdx].pos = videoPositons[idx].pos;
      videoPositons[idx].pos = "itemb3";
      curIdx = idx;
    };
    // * 颜色
    const decorationColors = ["#568aea", "#000000"];
    // * 加载标识
    const loading = ref<boolean>(true);
    // * 时间内容
    const timeInfo = reactive({
      setInterval: 0,
      dateDay: "",
      dateYear: "",
      dateWeek: "",
    });

    let audio1 = ref();
    // * 适配处理
    const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
    // 生命周期
    onMounted(() => {
      cancelLoading();
      handleTime();
      // todo 屏幕适应
      windowDraw();
      calcRate();
      isMon.value = true;
    });

    onUnmounted(() => {
      unWindowDraw();
      clearInterval(timeInfo.setInterval);
    });

    // methods
    // todo 处理 loading 展示
    const cancelLoading = () => {
      setTimeout(() => {
        loading.value = false;
      }, 500);
    };

    // todo 处理时间监听
    const handleTime = () => {
      timeInfo.setInterval = setInterval(() => {
        const date = new Date();
        timeInfo.dateDay = formatTime(date, "HH: mm: ss");
        timeInfo.dateYear = formatTime(date, "yyyy-MM-dd");
        timeInfo.dateWeek = WEEK[date.getDay()];
      }, 1000);
    };

    const store = useStore();
    store.dispatch("getChartData");
    const task1 = setInterval(() => {
      store.dispatch("getChartData");
    }, 10000);
    onUnmounted(() => {
      clearInterval(task1);
    });
    let config = computed(() => {
      return store.state.config;
    });
    let warnInfo = computed(() => {
      let tmp = store.getters.getWarnInfo;
      if (
        tmp.length > 0 &&
        store.state.config.is_alarm &&
        store.state.config.alarm_switch
      ) {
        setTimeout(() => {
          console.log("play----");
          try {
            audio1.value.play();
          } catch (e) {
            console.log("请点击界面任意一处开启语音报警");
          }
        }, 100);
      } else {
        audio1.value.pause();
      }
      return store.getters.getWarnInfo;
    });
    const data = ref({
      config,
      data: computed(() => {
        return store.state.chartData;
      }),
    });
    let showSetingModel = ref(false);
    let changeAlarm = () => {
      store.commit("setConfig", config.value);
      store.dispatch("setConfig", data.value);
      showSetingModel.value = false;
    };
    const createColumns = () => [
      {
        title: "采集参数",
        key: "label",
      },
      {
        title: "报警",
        key: "isAlarm",
        render(row, index) {
          return h(NSwitch, {
            value: row.isAlarm,
            disabled: row.disabled,
            onUpdateValue(v) {
              data.value.data[index].isAlarm = v;
            },
          });
        },
      },
      {
        title: "显示",
        key: "isShow",
        render(row, index) {
          return h(NSwitch, {
            value: row.isShow,
            disabled: row.disabled,
            onUpdateValue(v) {
              data.value.data[index].isShow = v;
            },
          });
        },
      },
    ];
    return {
      loading,
      timeInfo,
      appRef,
      title,
      subtitle,
      moduleInfo,
      showModel: ref(false),
      showSetingModel: showSetingModel,
      columns: createColumns(),
      model: data,
      param_scsy: computed((o) => store.getters.getParamsByKey("clz_0000")),
      param_zqyl: computed((o) => store.getters.getParamsByKey("zqyl_0115")),
      param_dycj: computed((o) => store.getters.getParamsByKey("zt")),
      videoPositons,
      isMon,
      changeVideo,
      warnInfo,
      audio1,
      config,
      changeAlarm,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
#index .hdindex {
  ::v-deep .border-box-content {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .host-body .body-box {
    //height: calc(100% - 20px);
    .content-box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-rows: 300px 300px 300px;
      grid-template-areas:
        "a1 a2 a3 a4"
        "a1 b2 b3 b3"
        "a1 c2 b3 b3";
      > div {
        overflow: hidden;
      }
      .itema1 {
        grid-area: a1;
      }
      .itema2 {
        grid-area: a2;
      }
      .itema3 {
        grid-area: a3;
      }
      .itema4 {
        grid-area: a4;
      }
      .itemb2 {
        grid-area: b2;
      }
      .itemb3 {
        grid-area: b3;
      }
      .itemc2 {
        grid-area: c2;
      }
      ::v-deep .dv-border-box-12 {
        .dv-border-svg-container {
          z-index: 3;
          pointer-events: none;
        }
        .border-box-content {
          border-radius: 15px;
          overflow: hidden;
          padding: 6px;
        }
      }
    }
    .title {
      .title-text {
        text-align: center;
        color: #fdfbfd;
        font-size: 70px;
        font-family: monospace;
        text-shadow: 1px 1px #b1bbca, 3px 2px #b1bbca;
      }
    }
  }

  .fade-enter-active {
    animation: zoomIn 1s;
  }
  .fade-leave-active {
    animation: zoomOut 1s;
  }
}
</style>
